<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 86155
  Date: 2022/3/6
  Time: 18:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>购物车</title>
  <link href="${pageContext.request.contextPath}/css/shoppingCart.css" rel="stylesheet">
  <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>

</head>
<body>

    <div class="w-max">
  <div class="cart-top">
    <div class="cart-logo f1">
      <a href="${pageContext.request.contextPath}/index.jsp" title="宠宠欲动网">
        <img src="${pageContext.request.contextPath}/images/shopping_cart_e_logo.png" alt="购物车">
      </a>
    </div>
    <div class="page-name c33 f1 m1">购物车</div>


    <div class="cart-search fr overflow clearfix mt20">
      <input type="text" name="keyword" class="search-text bgWhite f1 c999">
      <button class="cart-search-btn1 fr">搜索</button>
    </div>
  </div>

  <div class="select-menu rela">
    <div id="cart-menu"></div>
  </div>

  <!--3. 操作的小标题-->
  <div class="cart_bg">
  <div class="cart-head">
    <div class="head-checkbox">
      <input type="checkbox" class="ck1">
      <span>全选</span>
    </div>

    <div class="head-goods">商品 </div>
    <div class="head-props">  </div>
    <div class="head-right">单价 </div>
    <div class="head-right">数量 </div>
    <div class="head-right">小计 </div>
    <div class="head-right">操作 </div>
  </div>


  <!--4. 商品列表-->
  <div class="pro-list">

    <ul>
      <c:forEach items="${shopCarts.cartProductMap}" var="product">
        <li>
          <!--店铺名称-->
          <div class="shop-name">
            <!-- <input type="checkbox">-->
            <span>心相印旗舰店</span>
          </div>

          <!--商品详情： 左边（图片名称） + 右边（价格操作）-->
          <div class="goods-detail">
            <!-- 左边（图片名称）-->
            <div class="goods-left">
              <input type="checkbox" class="ck1">
              <a href="" class="goods-img">
                <img src="${product.value.productPic}">
              </a>
              <a href="javascript:void(0)" class="goods-name">
                ${product.value.productMsg}
              </a>
            </div>


            <!-- 右边（价格操作）-->
            <div class="goods-right">
              <div class="cell unit-price">
                <span>￥</span>
                <span>${product.value.productPrice}</span>
              </div>
              <div class="cell cart-quality">
                <button>-</button>
                <input type="text" value="${product.key.productNumber}">
                <button>+</button>
              </div>

              <div class="cell cart-xiaoji">
                <span>￥</span>
                <span>${product.value.productPrice * product.key.productNumber}</span>
              </div>
              <form class="cell cart-delete" action="${pageContext.request.contextPath}/shopCart/deleteCart/${product.key.cartId}" method="post">
                <input type="submit" style=" margin-left:30px;border: none; background-color: white" value="删除"/>
              </form>

            </div>
          </div>

        </li>

      </c:forEach>
    </ul>
  </div>
  <!--5. 底部结算条-->
  <div class="cart-floatbar">
    <div class="jiesuan-left">
      <input type="checkbox">
      <span>全选</span>
      <a href="">删除选中的商品</a>
    </div>

    <div class="jiesuan-right">
      <div class="selected-count">
        <span class="selected-count-label">已选中</span>
        <span class="number">0</span>
        <span class="selected-count-label">件商品</span>
      </div>

      <div class="zongjia">
        <span class="selected-count-label">总价:</span>
        <span  class="zongjia-price">￥</span>
        <span  class="zongjia-price">0</span>

      </div>


      <form class="jiesuan-form"  method="get">
        <input type="hidden" value="" id="allPrice" name="str">
        <input class="jiesuan-btn" type="button" value="去结算">
      </form>



    </div>
  </div>
  </div>
</div>
<%--<jsp:include page="/navigation/footer.jsp"/>--%>
<script src="${pageContext.request.contextPath}/js/shopping-cart.js"></script>
</body>
</html>
